import { useOutletContext,useNavigate } from "react-router-dom";
import {Swiper,SwiperSlide  } from 'swiper/react';
import { Pagination,Thumbs } from 'swiper/modules';
import { useEffect, useState } from "react";
import {getBanner,menuModule}from '@/http/API'
import SvgIcon from '@/components/svgIcon';
import 'swiper/css';
import 'swiper/css/pagination';
import './index.less'
import router from "@/routers";


const home = () => {
  interface swiperType {
    img:string,
    url?:string
  }
  const navigate = useNavigate()
  const [todoList, setTodoList] = useOutletContext();
  const [thumbsSwiper, setThumbsSwiper] = useState<swiperType[]>([]);
  const [ThumbsMenu, setThumbsMenu] = useState<any[]>([]);
  const [activeIndex,setActiveIndex]= useState(0)


  const fetchData =async()=>{
    try {
      
      const {code,data} =await getBanner()
      if(code==0){
        setThumbsSwiper(data.list)
      }
    } catch (error) {
      
    }
    try {
      const {code,data} =await menuModule()
      if(code==0){
        setThumbsMenu(data.list)
      }
    } catch (error) {
      
    }
  }
  const handleSwiper = (data:swiperType) => {
    navigate(data.url)
  };
useEffect(()=>{
  fetchData()
},[])

  return (
    <>
    <div>
      <Swiper modules={[Pagination,]} pagination={{ clickable: true }}    
    centeredSlides={true} loop={true}>
        {thumbsSwiper.map((x,index)=>{
          return (<SwiperSlide key={index} onClick={()=>handleSwiper(x)}>
            <img src={x.img} alt="" />
          </SwiperSlide>)
        })}
      </Swiper>
       </div>
       <div className="scrollTab">
        <div className="LeftName">
         {ThumbsMenu.map((x,index)=>{
          return (
            <div  key={index} className={activeIndex==index?'tabActive':""} onClick={()=>{setActiveIndex(index)}} >
            <img src={activeIndex==index?x.activeIco:x.ico} alt="" />
            <p>{x.name}</p>
          </div>
          )
         })}
        </div>
        <div className="gameContainer">
          
        </div>

       </div>

         {/* <input
        onKeyDown={(e) => {
          if (e.key === "Enter") {
            setTodoList([...todoList, e.target.value]);
          }
        }}
      />
      <button onClick={handleClear}>清空</button>
      <button onClick={handleAdd}>添加</button>
      <ul>
        {todoList.map((x, index) => {
          return <li key={x + index}>{x}</li>;
        })}
      </ul> */}
       </>
  );
};


export default home;
